<template>
    <!-- 商品列表 -->
    <div class="app-container">
        <!-- 筛选搜索 -->
        <div class="card">
            <el-card>
                <div class="card-body">
                    <div class="search">
                        <el-icon>
                            <Search />
                        </el-icon>
                        <span>筛选搜索</span>
                    </div>
                    <div>
                        <el-button class="button">重置</el-button>
                        <el-button type="primary" @click="searchData">查询搜索</el-button>
                    </div>
                </div>
                <el-form label-width="125px" :model="searchParams">
                    <el-form-item label="输入搜索:">
                        <el-input label-width="150px" v-model="searchParams.keyword" placeholder="商品名称" />
                    </el-form-item>
                    <el-form-item label="商品货号:">
                        <el-input v-model="searchParams.productSn" placeholder="商品货号" />
                    </el-form-item>
                    <el-form-item label="商品分类:">
                        <el-cascader v-model="searchParams.productCategoryId" placeholder="请选择全部" :options="prodWithChild"
                            clearable></el-cascader>
                    </el-form-item>
                    <el-form-item label="商品品牌:">
                        <el-select v-model="searchParams.brandId" clearable placeholder="请选择全部" width="150px">
                            <el-option v-for="item in brandIdList" :key="item.id" :label="item.name" :value="item.id" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="上架状态:">
                        <el-select v-model="searchParams.pubStatus" clearable placeholder="全部" width="150px">
                            <el-option v-for=" item  in  publish " :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="审核状态:">
                        <el-select v-model="searchParams.verStatus" clearable placeholder="全部" width="150px">
                            <el-option v-for=" item  in  verify" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </el-form-item>
                </el-form>
            </el-card>
        </div>
        <div class="list">
            <el-card>
                <div class="list-card">
                    <div class="data">
                        <el-icon :size="16">
                            <Tickets />
                        </el-icon>
                        <span>数据列表</span>
                    </div>
                    <el-button @click="toAddBrand">添加</el-button>
                </div>
            </el-card>
        </div>
        <!-- 商品列表 -->
        <div class="table">
            <el-table :data="tableList" style="width: 100%" @selection-change="SelectChange">
                <el-table-column type="selection"></el-table-column>
                <el-table-column prop="id" label="编号" width="60px" />
                <el-table-column label="商品图片">
                    <template #default="{ row }">
                        <div class="img"> <img :src="row.pic"></div>

                    </template>
                </el-table-column>
                <el-table-column prop="name" label="商品名称">
                    <template #default="{ row }">
                        <div>{{ row.name }}</div>
                        <div>品牌：{{ row.brandName
                        }}</div>
                    </template>
                </el-table-column>
                <el-table-column label="价格/货号">
                    <template #default="{ row }">
                        <div>价格：￥{{ row.originalPrice
                        }}</div>
                        <div>货号：{{ row.productSn }}</div>
                    </template>
                </el-table-column>
                <el-table-column label="属性录入方式">
                    <template #default="{ row }">
                        <div><span>上架： <el-switch v-model="row.publishStatus" :active-value="1" :inactive-value="0"
                                    @change="hdPublish(row)" /></span></div>
                        <div><span>新品：<el-switch v-model="row.newStatus" :active-value="1" :inactive-value="0"
                                    @change="hdNews(row)" /></span>
                        </div>
                        <div><span>推荐：<el-switch v-model="row.recommandStatus" :active-value="1" :inactive-value="0"
                                    @change="hdRecommend(row)" /></span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="排序" prop="sort">
                </el-table-column>
                <el-table-column label="SKU库存">
                    <template #default="{ row }">
                        <el-button type="primary" :icon="EditPen" circle @click="StorkProd(row.id)" />
                    </template>
                </el-table-column>
                <el-table-column label="销量" prop="sale"></el-table-column>
                <el-table-column label="审核状态">
                    <template #default="{ row }">
                        <div>{{ row.verifyStatus == 0 ? '未审核' : '审核状态' }}</div>
                        <div><el-button link type="primary">审核详情</el-button></div>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="150px">
                    <template #default="{ row }">
                        <p><el-button size="small" @click="">编辑</el-button></p>
                        <p><el-button type="danger" size="small" @click="deleteProd(row)">删除</el-button></p>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页器 -->
            <div class="pagination">
                <el-pagination v-model:current-page="tableParams.pageNum" v-model:page-size="tableParams.pageSize"
                    :page-sizes="[5, 10, 15]" layout="total, sizes, prev, pager, next, jumper" :total="total"
                    @size-change="handleSizeChange" @current-change="handleCurrentChange" />
            </div>
            <!-- 批量操作 -->
            <el-select v-model="selectVal" class="m-2" placeholder="批量操作">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
            <el-button @click="hdSelectProd" type="primary" style="margin-left: 20px;">确定</el-button>
            <!-- SKU库存编辑 -->
            <productStock :id="skuId" :dialogFormVisible=dialogFormVisible @cancel="cancelFn" @confirm="confirmFn">
            </productStock>
        </div>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import { Search, Tickets, EditPen } from '@element-plus/icons-vue'
import * as http from '@/request/http'
import { ElMessage, ElMessageBox } from 'element-plus';
import productStock from './components/ProductStock.vue'
import { useRouter } from 'vue-router';

const router = useRouter()

const toAddBrand = () => {
    router.push('addProduct')
}

const dialogFormVisible = ref(false)
const cancelFn = () => {
    dialogFormVisible.value = false
}
const confirmFn = () => {
    dialogFormVisible.value = false
}
//sku库存id
const skuId = ref(0)
//打开SKU库存编辑
const StorkProd = (id: number) => {
    skuId.value = id
    dialogFormVisible.value = true
}
//搜索参数
const searchParams = reactive({
    keyword: '',
    integer: '',
    productCategoryId: [],
    productSn: '',
    pubStatus: '',
    verStatus: '',
    brandId: ''
})
//商品列表必须参数
const tableParams = reactive({
    pageNum: 1,
    pageSize: 5,
})

// 批量操作
const selectVal = ref('')

//商品操作数据
const options: any[] = [
    { label: '商品上架', value: 'publishStatus1' },
    { label: '商品下架', value: 'publishStatus0' },
    { label: '设为推荐', value: 'recommandStatus1' },
    { label: '取消推荐', value: 'recommandStatus0' },
    { label: '设为新品', value: 'newStatus1' },
    { label: '取消新品', value: 'newStatus0' },
    { label: '转移到分类', value: 'refresh' },
    { label: '移入回收站', value: 'delete' },
]
//批量操作状态方法
const hdSelection = () => {
    switch (selectVal.value) {
        case 'publishStatus1':
            changePublish(ids.value, 1)
            break;
        case 'publishStatus0':
            changePublish(ids.value, 0)
            break;
        case 'recommandStatus1':
            changeRecommend(ids.value, 1)
            break;
        case 'recommandStatus0':
            changeRecommend(ids.value, 0)
            break;
        case 'newStatus1':
            changeNews(ids.value, 1)
            break;
        case 'newStatus0':
            changeNews(ids.value, 0)
            break;
        case 'refresh':
            getProduct({ pageNum: tableParams.pageNum, pageSize: tableParams.pageSize });
            break;
        default: 'delete'
            changeDelete(ids.value, 1);
            break;
    }
}
//批量操作商品状态
const hdSelectProd = () => {
    if (selectVal.value == '') {
        ElMessage.warning('请选择批量操作类型')
        return
    } else if (ids.value.length == 0) {
        ElMessage.warning('请选择一条记录')
        return
    } else {
        ElMessageBox.confirm(
            '是否进行改批量操作',
            '提示',
            {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning',
            }
        ).then(() => { hdSelection() })
    }
}
//勾选商品
const SelectChange = (val: IProductList[]) => {
    ids.value = val.map(item => item.id)
}
//上架状态
const publish = [
    { label: '上架', value: 1 },
    { label: '下架', value: 0 },
]
//审核状态
const verify = [
    { label: '审核通过', value: 1 },
    { label: '未审核', value: 0 },
]
//处理商品分类数据
const prodWithChild = ref<IWithChild[]>([])
http.product.productWithChild().then(res => {
    prodWithChild.value = res.data.map((item: IWithChild) => {
        return {
            label: item.name,
            value: item.id,
            children: item.children.map(el => {
                return {
                    label: el.name,
                    value: el.id,
                }
            })
        }
    })
})
//商品品牌数据
const brandIdList = ref<IBrand[]>([])
const brandParams = reactive({
    pageNum: 1,
    pageSize: 100,
})
const getBrand = () => {
    http.brand.brandList(brandParams).then(res => {
        brandIdList.value = res.data.list
    })
}
getBrand()
//商品分类值
const productIds = ref<number>()
//商品搜索
const searchData = () => {
    productIds.value = searchParams.productCategoryId?.find(item => item)
    getProduct({
        pageNum: tableParams.pageNum,
        pageSize: tableParams.pageSize,
        keyword: searchParams.keyword,
        productCategoryId: productIds.value,
        brandId: searchParams.brandId,
        productSn: searchParams.productSn,
        publishStatus: searchParams.pubStatus,
        verifyStatus: searchParams.verStatus
    })
}
//当前页
const handleSizeChange = (val: number) => {
    getProduct({ pageNum: tableParams.pageNum, pageSize: val })
}
//每页显示几条
const handleCurrentChange = (val: number) => {
    getProduct({ pageNum: val, pageSize: tableParams.pageSize })
}
//总数据
const total = ref(0)
//商品列表table
const tableList = ref<MyQueryProductList[]>([])
const getProduct = (tableParams: IProdParams) => {
    http.product.productList(tableParams).then(res => {
        tableList.value = res.data.list
        total.value = res.data.total
    })
}
getProduct({ pageNum: tableParams.pageNum, pageSize: tableParams.pageSize })

//上下架状态
const ids = ref<number[]>([])
const changePublish = (ids: number[], publishStatus: number) => {
    http.product.productPublishStatus(ids, publishStatus).then(res => {
        if (res.code == 200) {
            ElMessage.success('修改成功')
            getProduct({ pageNum: tableParams.pageNum, pageSize: tableParams.pageSize })
        } else {
            publishStatus = publishStatus == 1 ? 0 : 1
        }
    })
}
const hdPublish = (row: IProductList) => {
    ids.value.push(row.id)
    changePublish(ids.value, row.publishStatus)
    ids.value.shift()
}
//新品状态
const changeNews = (ids: number[], newStatus: number) => {
    http.product.productNewStatus(ids, newStatus).then(res => {
        if (res.code == 200) {
            ElMessage.success('修改成功')
            getProduct({ pageNum: tableParams.pageNum, pageSize: tableParams.pageSize })
        } else {
            newStatus = newStatus == 1 ? 0 : 1
        }
    })
}
const hdNews = (row: IProductList) => {
    ids.value.push(row.id)
    changeNews(ids.value, row.newStatus)
    ids.value.shift()
}
//推荐商品状态
const changeRecommend = (ids: number[], recommandStatus: number) => {
    http.product.productRecommendStatus(ids, recommandStatus).then(res => {
        if (res.code == 200) {
            ElMessage.success('修改成功')
            getProduct({ pageNum: tableParams.pageNum, pageSize: tableParams.pageSize })
        } else {
            recommandStatus = recommandStatus == 1 ? 0 : 1
        }
    })
}
const hdRecommend = (row: IProductList) => {
    ids.value.push(row.id)
    changeRecommend(ids.value, row.recommandStatus)
    ids.value.shift()
}
//删除商品
const changeDelete = (ids: number[], deleteStatus: number) => {
    http.product.productDeleteStatus(ids, deleteStatus).then(res => {
        if (res.code == 200) {
            ElMessage.success('删除成功')
            getProduct({ pageNum: tableParams.pageNum, pageSize: tableParams.pageSize })
        }
    })
}
const deleteProd = (row: IProductList) => {
    ids.value.push(row.id)
    row.deleteStatus = 1
    ElMessageBox.confirm(
        '是否进行删除操作',
        '提示',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        changeDelete(ids.value, row.deleteStatus)
    }).catch(() => {
        ids.value.shift()
    })
}
</script>

<style scoped lang="less">
.card {
    margin-bottom: 20px;

    .el-button {
        font-size: 12px;
    }

    .card-body {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .search {
            display: flex;
            align-items: center;
        }

        .el-icon {
            padding-right: 10px;
        }
    }

    .el-form {
        padding: 0 60px;
        margin-top: 20px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;

        .el-form-item {
            width: 350px;
        }

        .el-input {
            width: 218px;
        }
    }

}

.list {

    .list-card {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .data {
            display: flex;
            align-items: center;
            font-size: 14px;

            .el-icon {
                padding-right: 10px;
            }
        }
    }
}

:deep(.table) {
    margin-top: 20px;

    .img {
        width: 80px;
        height: 80px;
        margin: auto;

        img {
            width: 100%;
            text-align: center;
        }
    }

    .el-table {
        border: 1px solid #ebeef5;

    }

    .el-table__cell {
        border-right: 1px solid #ebeef5;
        color: #909399;
        font-size: 14px;
    }

    th {
        color: #000;
        font-size: 13px;
    }

    .cell {
        text-align: center;
        padding: 0 10px;
    }
}

.pagination {
    width: 100%;
    margin-top: 20px;

    .el-pagination {
        float: right;
    }
}
</style>